<template>
  <div id="upload_pwd">
    <nav-bar>
      <span slot="text">修改密码</span>
    </nav-bar>
    <div class="upload_container">
      <form>
        <ul>
          <li>
            <input
              type="password"
              placeholder="旧密码"
              v-model.trim="form.oldPassWord"
            />
          </li>
          <li>
            <input
              type="password"
              placeholder="请输入新密码"
              v-model.trim="form.newPassWord"
            />
          </li>
          <li>
            <input
              type="password"
              placeholder="请确认新密码"
              v-model.trim="form.confirmPassWord"
            />
          </li>
        </ul>
      </form>
      <div class="btns">
        <button @click="uploadPwd">确认修改</button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { modifyPassowrd } from '@/network/getData';
export default {
  data() {
    return {
      form: {
        oldPassWord: '',
        newPassWord: '',
        confirmPassWord: ''
      }
    };
  },
  computed: {
    ...mapState(['userInfo'])
  },
  methods: {
    // 更新密码
    uploadPwd() {
      if (!this.form.oldPassWord) {
        console.log('请输入旧密码');
      } else if (!this.form.newPassWord) {
        console.log('请输入新密码');
      } else if (!this.form.confirmPassWord) {
        console.log('请输入确认密码');
      } else if (this.form.newPassWord !== this.form.confirmPassWord) {
        console.log('新密码与旧密码不一致');
      }

      if (this.userInfo && this.userInfo.id) {
        modifyPassowrd(this.userInfo.id, this.form).then(res => {
          if (res.code === 200) {
            this.$router.go(-1);
          }
        });
      } else {
        console.log('请登录');
      }
    }
  }
};
</script>

<style lang="less" scoped>
#upload_pwd {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #fff;
}
.upload_container {
  margin-top: 45px;
  li {
    position: relative;
    padding: 10px;
    border-bottom: 1px solid #eee;
    background-color: #fff;
    input {
      width: 100%;
      height: 100%;
    }
    img {
      position: absolute;
      top: 50%;
      right: 10px;
      transform: translateY(-50%);
      width: 100px;
    }
  }
  .btns {
    margin-top: 20px;
    text-align: center;
    button {
      width: 95%;
      line-height: 35px;
      border-radius: 5px;
      color: #fff;
      background-color: #4cd964;
    }
  }
}
</style>
